<script setup>
import { Search } from '@element-plus/icons-vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import {Roles} from '../const/index.js'
import NoticeBox from '../components/NoticeBox.vue';
const router = useRouter()
// const route = useRoute()
var search = ref('')
var activeName = ref('announcement')
var ableAnnounce = ref(false) //是否有权限发布通知
var annoucementList = ref([]) //当前页面需要渲染的通知详情数组，用于传参给组件NoticeBox
var currentPage = ref(1) //当前页，用于接口传参
var lastPage = ref(0) //最后一页，用于分页条
var type = ref(1) //当前查看的类别
var showCutLine = ref(false)
const role = localStorage.getItem("role")
// var role = localStorage.getItem("role") == 1 ? "central" : "branch";
// 后端补的加油站接口名不一样 所以得另起一个变量做url
// var questURL = localStorage.getItem("role") == 3 ? "/petrol/getPetrolAnnouncementList?" : '/' + role + '/getAnnouncementList?'
const questURL = '/system/notice'
const pageSize = 5
const total = ref(0)
const handleSearch = (pageNum = 1, keyWord = '', type=1) => {
  axios.get(`${questURL}?type=${type}&keyWord=${keyWord}&pageNum=${pageNum}&pageSize=${pageSize}`).then(res => {
    const {code, msg, ...data} = res.data
    if (code == 200) {
      const {rows, total: tTotal, totalPage} = data
      annoucementList.value = rows
      total.value = tTotal
      if (totalPage <= currentPage.value) {
        showCutLine.value = true
      } else {
        showCutLine.value = false
      }
    } else {
      ElMessage(msg)
    }
  })
}

onMounted(() => {
  handleSearch()
  if (role == Roles[0]) {//总/分公司管理员，那就可以发布通知
    ableAnnounce.value = true
  }
  // // 一进页面就调接口
  // if (role == "petrol") {
  //   axios.get(questURL + 'type=1&page=' + currentPage.value + '&size=8').then(res => {
  //     if (res.data.code != 0) ElMessage.error(res.data.msg)
  //     else {
  //       // console.log(res.data);
  //       annoucementList.value = res.data.data.data
  //       lastPage.value = res.data.data.lastPage * 10
  //       if (annoucementList.value.length < 8) showCutLine.value = true
  //     }
  //   })
  // } else {
  //   axios.get(questURL + 'type=1&page=' + currentPage.value + '&size=8').then(res => {
  //     if (res.data.code != 0) ElMessage.error(res.data.msg)
  //     else {

  //       annoucementList.value = res.data.data.data
  //       lastPage.value = res.data.data.lastPage * 10
  //       if (annoucementList.value.length < 8) showCutLine.value = true
  //     }
  //   })
  // }
    

})

// 类别改变
const handleClick = (tab, event) => {
  search.value = ""
  type.value = event.target.innerText == "公告" ? 1 : event.target.innerText == "通知" ? 2 : 3;
  currentPage.value = 1
  handleSearch(1, '', type.value)
}

// 点击分页条
const handleChangePage = (value) => {
  currentPage.value = value
  handleSearch(value, search.value, type.value)
  // axios.get(questURL + 'type=' + type.value + '&page=' + currentPage.value + '&size=8').then(res => {
  //   if (res.data.code != 0) ElMessage.error(res.data.msg)
  //   else {

  //     annoucementList.value = res.data.data.data
  //     lastPage.value = res.data.data.lastPage * 10
  //     if (annoucementList.value.length < 8) showCutLine.value = true
  //     else showCutLine.value = false
  //   }
  // })
}

const refresh = () => {
  currentPage.value = 1
  search.value = ''
  handleSearch(1, '', type.value)
}


//搜索框内容改变后失焦/回车键触发搜索
const goSearch = (searchContent) => {
  search.value = searchContent
  handleSearch(1, searchContent, type.value)
}

// 转去发布公告页面
const toAnnounceBulletin = () => {
  router.push({
    path: '/main/announceBulletin'
  })
}
</script>

<template>
  <h1 class="pageTitle">公告板</h1>
  <div id="navSearchBar">
    <el-input v-model="search" class="w-50 m-2" placeholder="搜索当前类别主题" :prefix-icon="Search" clearable
      @change="goSearch" />
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <div v-show="total===0" class="emptyInfo" >
          暂无数据
        </div>
      <el-tab-pane label="公告" name="announcement">
        <NoticeBox v-for="item in annoucementList" :key="item.id" :content="item.content" :title="item.title"
          :type="item.type" :date="item.createDate" :id="item.id" :file="item.file" @refresh="refresh" />
        <!-- <el-divider v-if="showCutLine">
          *
        </el-divider> -->

      </el-tab-pane>
      <el-tab-pane label="通知" name="notice">
        <NoticeBox v-for="item in annoucementList" :key="item.id" :content="item.content" :title="item.title"
          :type="item.type" :date="item.createDate" :id="item.id" :file="item.file" @refresh="refresh" />
<!-- 
        <el-divider v-if="showCutLine">
          *
        </el-divider> -->

      </el-tab-pane>
      <el-tab-pane label="安全知识普及" name="popularize">
        <NoticeBox v-for="item in annoucementList" :key="item.id" :content="item.content" :title="item.title"
          :type="item.type" :date="item.createDate" :id="item.id" :file="item.file" @refresh="refresh" />

        <!-- <el-divider v-if="showCutLine">
          *
        </el-divider> -->

      </el-tab-pane>
    </el-tabs>

  </div>
  <el-pagination style="padding-bottom: 100px;" :current-page="currentPage" background layout="prev, pager, next" :total="total" class="mt-4" :default-page-size="pageSize" @current-change="handleChangePage" />
  <div v-if="ableAnnounce" id="annouce">
    <button id="annouceButton" @click="toAnnounceBulletin">+</button>
  </div>


</template>

<style scoped>
#annouceButton {
  background-color: var(--el-color-primary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
}

#annouce {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 50px;
  z-index: 10;
  background-color: #e1e6ed;
  border-radius: 20px 20px 0 0;

}

.el-tab-pane {
  overflow: auto;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.container-wrapper {
  overflow: hidden
}

#navSearchBar {
  /* height: 100%; */
  position: relative;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;

}

.demo-tabs {
  padding: 0 3%;
}

.el-icon svg {
  margin-right: 0 !important;
}

#title {
  margin-top: 10px;
  color: var(--el-color-primary);
}

.el-input {
  z-index: 10;
  width: 25%;
  position: absolute;
  top: 0;
  right: 5%;
}

.el-pagination {
  width: fit-content;
  margin: 10px auto;
}
.emptyInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #757575;
  font-size: 30px;
}
</style>